<template>
	<view>
		<!--店铺 -->
		<view class="box" style="margin-top: 10px;">
			<view style="display: flex;">
				<image :src="businessData.avatar" style="width: 70px;height: 60px;"></image>
				<view>
					<view style="display: flex;">
						<view style="font-size: 16px;font-weight: bold;margin-left: 10px;margin-top: 2px;">
							{{businessData.name}}
						</view>
						<image src="../../static/icons/粉丝.png" style="width: 40rpx;margin-left: 10px;margin-top: 2px"
							mode="widthFix">
							<view style="margin-left: 2px;margin-top: 2px;">{{businessData.collect}}
							</view>
					</view>
					<view style="display: flex;margin-left: 8px;margin-top: 8px;">
						<uni-rate allow-half :value="businessData.star" readonly="true" />
					</view>
				</view>
				<view style="margin-left: 20px;">
					<view style="margin-bottom: 4px;">
						<button style="line-height: 10px;display: flex;text-align: center;align-items: center;"
							@click="BusinessCollect">
							<image v-if='!collectBusiness' src="../../static/icons/收藏.png"
								style="width: 45rpx;margin-left: 10px;margin-top: 2px" mode="widthFix">
								<image v-else src="../../static/icons/已收藏.png"
									style="width: 45rpx;margin-left: 10px;margin-top: 2px" mode="widthFix">
									<view style="font-size: 13px;font-weight: bold;">收藏店铺</view>
						</button>
						<view style="display: flex;">
							<image src="../../static/icons/客服电话.png" style="width: 45rpx;margin-top: 4px"
								mode="widthFix">
								<view style="font-size: 13px;font-weight: bold;margin-top: 8px;">{{businessData.phone}}
								</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 10px;">
				<view style="margin-top: 5px;"><strong>地址：</strong>{{businessData.address}}</view>
				<view style="margin-top: 5px;"><strong>邮箱：</strong>{{businessData.email}}</view>
				<view style="margin-top: 5px;"><strong>商家介绍：</strong>{{businessData.introduction}}</view>
			</view>
		</view>
		<view style="padding: 10px;">
			<view style="display: flex;">
				<view style="font-size: 18px;font-weight: bold;">店铺推荐</view>
				<view style="margin-left: 15px;color: gray;margin-top: 4px;">优质好物</view>
				<view style="margin-left: 10px;color: gray;margin-top: 4px;">质量保证</view>
				<view style="font-weight: bold;margin-left: 60px;margin-top: 4px;" @click="dialogToggle('error')">查看更多 >
				</view>
			</view>
		</view>
		<view style="flex-wrap: wrap;display: flex;">
			<view v-for="(item, index) in MedicinesData" :key="item.id"
				style="width: 50%; padding: 5px 5px; box-sizing: border-box;">
				<view style="margin-bottom: 20rpx;">
					<view class="box" @click="goMedicinesDetail(item.id)">
						<image :src="item.photo" style="width: 100%; height: 180px;"></image>
						<view>
							<view style="display: flex;">
								<span>
									<span class="square-box"
										style="border: 1px solid red; color: white; background-color: #FF695C; margin-right: 10rpx;">自营</span>
									<span style="font-weight: bold; font-size: 16px;">{{item.name}}</span>

								</span>
							</view>
							<view style="margin-top: 5px;">{{item.medicinesStyleList[0].styleDescribe}}起/盒</view>
							<view style="display: flex;">
								<view style="flex: 8; display: flex; color: red;margin-top: 5px;">
									<view style="margin-top: 5rpx;">￥</view>
									<text
										style="font-size: 18px; margin-right: 10rpx;">{{item.medicinesStyleList[0].price}}</text>
									<view style="margin-top: 10rpx;">起/盒</view>
								</view>
								<view style="margin-top: 2px;">
									<image src="../../static/imgs/购物车.png" style="width: 50rpx;" mode="widthFix">
									</image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="我知道了" title="通知" content="测试数据,暂无更多信息"
					@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('xm-user'),
				rateText: '',
				value: '',
				msgType: "",
				collectBusiness: false,
				MedicinesData: {},
				businessData: {},
				businessId: "",
			}
		},
		onLoad(option) {
			this.businessId = parseInt(option.businessId); // 转换为整数
		},
		onShow() {
			this.loadBusiness()
			this.loadBusinessCollect()
			this.loadMedicinesByBusinessId()
		},
		methods: {
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			goMedicinesDetail(medicinesId) {
				uni.navigateTo({
					url: '/pages/medicinesDetail/medicinesDetail?medicinesId=' + medicinesId
				})
			},
			loadMedicinesByBusinessId() {
				this.$request.get(`/medicines/selectByBusinessId/${this.businessId}`).then(res => {
					if (res.code === '200') {
						this.MedicinesData = res.data
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			loadBusinessCollect() {
				this.$request.get(
						`/collect/selectByUserId/${this.user.id}/${this.businessId}/${encodeURIComponent('BUSINESS')}`)
					.then(res => {
						if (res.data !== null) {
							this.collectBusiness = true;
						}
					});
			},
			BusinessCollect() {
				let data = {
					userId: this.user.id,
					fid: this.businessId,
					module: 'BUSINESS'
				};
				this.collectBusiness = !this.collectBusiness;
				this.$request.post('/collect/save', data).then(res => {
					if (res.code === '200') {
						uni.showToast({
							icon: 'success',
							title: '收藏成功'
						})
					} else {
						uni.showToast({
							icon: 'error',
							title: res.msg
						})
					}
				})
			},
			loadBusiness() {
				this.$request.get(`/business/selectById/${this.businessId}`).then(res => {
					if (res.code === '200') {
						this.businessData = res.data;
						this.value = res.data.star
					} else {
						this.$message.error(res.msg);
					}
				})
			},
		}
	}
</script>

<style>

</style>